{% extends "templates/main_template.html.j2" %}
{% import "macros/table.html.j2" as TABLE %}


{% block title %}Доски · Farado{% endblock %}

{% set active_menu = 'boards' %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  {{ TABLE.STYLES() }}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Доски</li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block content %}
  {% if restriction.is_admin %}
    <div class="page-toolbar">
      <a  href="/boards/add_board"
          class="btn btn-outline-primary btn-sm"
          role="button"
          aria-pressed="true">
        <i class="bi bi-plus mr-1"></i> Добавить доску
      </a>
    </div>
  {% endif %}

  <div class="table-container">
    <table
        class="table table-striped table-sm table-bordered table-hover"
        style="width:100%"
        id="boards_table">
      <thead>
        <tr>
          <th scope="col" style="width: 1%">Id</th>
          <th scope="col">Название</th>
        </tr>
      </thead>
      <tbody>
        {% for board in project_manager.boards() %}
          <tr>
            <th scope="row">{{ board.id }}</th>
            <td>
              <a href="/boards/board/{{ board.id }}">{{ board.caption|e }}</a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ TABLE.SCRIPTS() }}
  <script>
    document_ready_function = function() {
      $('#boards_table').DataTable({
        "paging": false,
        "processing": true,
        "serverSide": false,
        "searching": true,
        "ordering": true,
        "pageLength": 20,
        "lengthChange": false,
        "order": [[ 1, "asc" ]],
        "columns": [
          {
            "data": "id",
            "orderable": true
          },
          {
            "data": "caption",
            "orderable": true
          }
        ]
      });
    }
  </script>
{% endblock %}
